import { ExtendPanelPropsType } from '../extend-panel.props';
import { SetupContext } from 'vue';
import { ItemType, ItemDataType } from './types';
export default function (
    props: ExtendPanelPropsType,
    context: SetupContext,
    item: ItemType,
    key: number
) {
    const renderContent = () => {
        let isOpenClassName = '';
        let style = '';
        let contentScroll:ItemType['contentScroll'];
        if('contentScroll' in item){
            contentScroll = item.contentScroll;
            if(contentScroll?.open){
                isOpenClassName = 'f-extend-panel-item-content-components-openScroll';
                if(contentScroll?.width && contentScroll.width === 'auto'){
                    style = ''
                }else{
                    style = `width:${contentScroll.width}`
                }
            }else{
                isOpenClassName = '';
            }
        }else{
            isOpenClassName = '';
        }
        
        return <div class={'f-extend-panel-item-content-components '+ isOpenClassName}>
            <div class='f-extend-panel-item-content-componentsRotate'>
                <div class='f-extend-panel-item-content-componentsScroll'>
                    <div class='f-extend-panel-item-content-componentsContent'>
                        <div class='f-extend-panel-item-content-components-ul'>
                            {
                                item.data.map((record: ItemDataType, rindex: number) => {
                                    return <div class='f-extend-panel-item-content-components-ui-li' style={style}>
                                        <div class='f-extend-panel-item-content-components-ui-li-label'>{record.label}</div>
                                        <div class='f-extend-panel-item-content-components-ui-li-value'>
                                            <span class='f-extend-panel-item-content-components-ui-li-value-num'>{record.value}</span>
                                            <span class='f-extend-panel-item-content-components-ui-li-value-unit'>{record?.unit}</span>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
    return () => {
        return context?.slots?.content && context?.slots?.content(item, key) || renderContent()
    }
}